﻿@model SmartAdmin.Data.Models.RoleMenu
@{
  ViewData["Title"] = "角色授权";
  ViewData["PageName"] = "rolemenus_index";
  ViewData["Heading"] = "<i class='fal fa-users text-primary'></i>  角色授权";
  ViewData["Category1"] = "系统管理";
  ViewData["PageDescription"] = "";
}
@section HeadBlock {
  
  <link href="~/js/easyui/themes/insdep/easyui.css" rel="stylesheet" asp-append-version="true" />
}
<div class="row">
  <div class="col-md-3">
    <div class="card border  m-auto m-lg-0">
      <div class="card-header bg-trans-gradient py-2 pr-2 d-flex align-items-center flex-wrap">
        <!-- we wrap header title inside a span tag with utility padding -->
        <div class="card-title text-white">角色</div>

      </div>
      <ul class="list-group list-group-flush ">
        @foreach (var item in ViewBag.Roles)
        {
          <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="mr-auto align-self-center">@item.RoleName</div>
            <div class="mr-3 mb-3 align-self-center"><span class="badge badge-icon badge-pill">@item.Count</span></div>
          </li>
        }
      </ul>
    </div>
  </div>
  <div class="col-md-9">
    <div class="card border  m-auto m-lg-0">
      <div class="card-header bg-trans-gradient py-2 pr-2 d-flex align-items-center flex-wrap">
        <!-- we wrap header title inside a span tag with utility padding -->
        <div class="card-title text-white">角色</div>
        <button id="savebutton" 
                class="btn btn-sm btn-primary ml-auto waves-effect waves-themed">
          <span class="fal fa-save mr-1"></span>
          保存
        </button>
      </div>
      <div class="card-body enable-loader">
        <div class="loader"><i class="fal fa-spinner-third fa-spin-4x fs-xxl"></i></div>
        <div class="table-responsive">
          <table id="menu-tree" style="width:auto;height:auto">
          </table>
        </div>
      </div>
    </div>
  </div>
</div>



@section ScriptsBlock {
  <script src="~/js/dependency/moment/moment.js" asp-append-version="true"></script>
  <script src="~/js/easyui/jquery.easyui.min.js" asp-append-version="true"></script>
  <script src="~/js/easyui/locale/easyui-lang-zh_CN.js" asp-append-version="true"></script>
  <script src="~/js/plugin/jquery.serializejson/jquery.serializejson.js" asp-append-version="true"></script>
  <script type="text/javascript">
    //上传导入参数设定
    var selectedrole = {};
    function formatcreatecheckbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';

      var checked = val == true && row.Url != "#" ? 'checked ' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'create',this)  >";
    }
    function formateditcheckbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != "#" ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'edit',this)  >";
    }
    function formatimportcheckbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != "#" ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'import',this)  >";
    }
    function formatdeletecheckbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != '#' ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'delete',this)  >";
    }

    function formatexportcheckbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != '#' ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'export',this)  >";
    }

    function formatpoint1checkbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != '#' ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'point1',this)  >";
    }

    function formatpoint2checkbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != '#' ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'point2',this)  >";
    }

    function formatpoint3checkbox(val, row) {
      var disabled = row.Url == "#" ? 'disabled ' : '';
      var checked = val == true && row.Url != '#' ? 'checked' : '';

      return "<input type=\"checkbox\"  name=\"op\"   value=" + val + " " + checked + disabled + " onClick=ckClick(" + JSON.stringify(row) + ",'point3',this)  >";
    }

    function ckClick(row, name, element) {
      if (name == 'create') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            Create: element.checked,
          }
        });
      }
      if (name == 'edit') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            Edit: element.checked,
          }
        });
      }
      if (name == 'delete') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            Delete: element.checked,
          }
        });
      }
      if (name == 'import') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            Import: element.checked,
          }
        });
      }

      if (name == 'export') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            Export: element.checked,
          }
        });
      }

      if (name == 'point1') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            FunctionPoint1: element.checked,
          }
        });
      }
      if (name == 'point2') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            FunctionPoint2: element.checked,
          }
        });
      }
      if (name == 'point3') {
        $('#menu-tree').treegrid('update', {
          id: row.Id,
          row: {
            FunctionPoint3: element.checked,
          }
        });
      }

    }
    function onUnselect(row) {
      var data = $('#menu-tree').treegrid('getChildren', row.Id);
      $.each(data, function (index, row) {
        $('#menu-tree').treegrid('unselect', row.Id);
      })
    }
    function onSelect(row) {
      var data = $('#menu-tree').treegrid('getChildren', row.Id);
      $.each(data, function (index, row) {
        $('#menu-tree').treegrid('select', row.Id);
      })
      //var parent = $('#menu-tree').treegrid('getParent', row.Id);
      //var selections = $('#menu-tree').treegrid('getSelections');
      //$('#menu-tree').treegrid('select', parent.Id);
    }
    $(function () {
      $('#savebutton').attr('disabled', true);

      $('#menu-tree').treegrid(
        {
          iconCls: 'icon-ok',
          rownumbers: true,
          animate: true,
          singleSelect: false,
          fitColumns: true,
          url: '/RoleMenus/GetMenuList',
          method: 'get',
          idField: 'Id',
          treeField: 'Title',
          pagination: false,
          checkOnSelect: true,
          onSelect: onSelect,
          onUnselect: onUnselect,
          onBeforeLoad: function () {
            $('.enable-loader').removeClass('enable-loader')
          },
          columns: [[
            {
              field: 'ck',
              checkbox: true

            },
            {
              field: 'Title',
              width: 180,
              title: '菜单名称'
            },
            {
              field: 'Code',
              width: 80,
              title: '序号'
            },
            {
              field: 'Url',
              width: 120,
              title: 'Url'
            }
            ,
            {
              field: 'Create',
              width: 70,
              title: '新增',
              formatter: formatcreatecheckbox

            },
            {
              field: 'Edit',
              width: 70,
              title: '编辑',
              formatter: formateditcheckbox
            },
            {
              field: 'Delete',
              width: 70,
              title: '删除',
              formatter: formatdeletecheckbox
            }
            ,
            {
              field: 'Import',
              width: 70,
              title: '导入',
              formatter: formatimportcheckbox
            }
            ,
            {
              field: 'Export',
              width: 70,
              title: '导出',
              formatter: formatexportcheckbox
            },
            {
              field: 'FunctionPoint1',
              width: 70,
              title: '功能点1',
              formatter: formatpoint1checkbox
            },
            {
              field: 'FunctionPoint2',
              width: 70,
              title: '功能点2',
              formatter: formatpoint2checkbox
            },
            {
              field: 'FunctionPoint3',
              width: 70,
              title: '功能点3',
              formatter: formatpoint3checkbox
            }
          ]]
        }
      );
      $('.list-group-item').click(function () {
        $('.list-group-item').removeClass('active');
        $(this).addClass('active');
        $currenitem = $(this);
        //console.log($currenitem.children("div:eq(0)"));
        selectedrole = $(this).children("div:eq(0)").text();
        $('#savebutton').attr("disabled", false)
        //console.log($(this).children("span:eq(1)").text());
        $('#menu-tree').treegrid('loading')
        $.get('/RoleMenus/GetMenus', { roleName: selectedrole }, function (data, status, q) {
          $('#menu-tree').treegrid('uncheckAll');
          $.each(data, function (index, item) {
            $('#savebutton').attr('disabled', false);
            $('#menu-tree').treegrid('checkRow', item.MenuId);
            $('#menu-tree').treegrid('update', {
              id: item.MenuId,
              row: {
                Import: item.Import,
                Create: item.Create,
                Edit: item.Edit,
                Delete: item.Delete,
                Export: item.Export,
                FunctionPoint1: item.FunctionPoint1,
                FunctionPoint2: item.FunctionPoint2,
                FunctionPoint3: item.FunctionPoint3

              }
            });
          })
          $('#menu-tree').treegrid('loaded')
        });

      });

      function save() {
        
        var selectednodes = $('#menu-tree').treegrid('getSelections');
        var list = [];
        $.each(selectednodes, function (i, data) {
          if (selectedrole.length > 0) {
            var item = {
              'RoleName': selectedrole,
              'MenuId': data.Id,
              'Create': data.Create,
              'Edit': data.Edit,
              'Delete': data.Delete,
              'Import': data.Import,
              'Export': data.Export,
              'FunctionPoint1': data.FunctionPoint1,
              'FunctionPoint2': data.FunctionPoint2,
              'FunctionPoint3': data.FunctionPoint3,


            };
            list.push(item);
          }
        });

        //console.log(list);
        if (selectedrole.length > 0 && list.length > 0) {
          $.messager.progress({
            title: '请等待',
            msg: '正在保存数据...'
          });
          $.post('/RoleMenus/Submit', { selectmenus: list }, function (data, status, q) {
            $.messager.progress('close');
            $.messager.alert('提示', '保存成功', 'info', function () {
              location.reload();
            });
          });
        } else {
          $.messager.alert('提示', '请选择需要授权的角色');
        }
      }

      $('#savebutton').click(function () {
        save();
      })


    });



  </script>
}

